<template>
     <div class="phone">
        <div class="bg_phone">
          <div class="common-layout">
            <el-container>
              <el-header>
                <h2 class="title">{{ formData.title}}</h2>
              </el-header>
              <el-main>
              <div class="choujiangjihui_num">您今天还有x次抽奖机会</div>
              <div v-if="formData.invite_desc_switch != 2">
                <p class="choujiangjihui_desc1">每分享给x位好友可增加x次抽奖机会</p>
                <p class="choujiangjihui_desc2">最多获得x次抽奖机会，每日最多可以抽奖x次</p>
              </div>
                <div class="top">
                  <div class="prize_img_box">
                    <div :class="['prize', `rectangular${formData.reward_attr.length >= 2 ? formData.reward_attr.length : 2}`]">
                      <div class="begin"></div>
                       <div class="reward_attr">
                       <div :class="`reward_attr_item${formData.reward_attr.length}`" v-for="(item,index) in formData.reward_attr">
                        <el-image   :src="item.reward_image" alt="" style="width:40px;height:40px">
                        <template #error>
                           <span></span>
                        </template>
                        </el-image>
                        <div>{{item.reward_title}}</div>
                       </div>
                       </div>
                    </div>
                  </div>
                </div>
              </el-main>
            </el-container>
          </div>
        </div>
     </div>
</template>

<script setup lang="ts">
import bus from '@/utils/bus';
import { ref,watch,onUnmounted } from 'vue';
const props = defineProps({
  rewardInfo: {
    type: Object,
    default: () => ([])
  },
  inviteDescSwitch: {
    type: [Number,String],
    default: 1
  }
})
    const formData = ref({
    // exchange_type: 1, //	兑奖时间 1-活动期限 2-活动结束1
    title:'',//	活动标题
    reward_attr: [
      {
        reward_type: 3, //	奖品类型 1-实物 2-普通红包
        red_envelope_type: 1, //红包类型 1-普通红包 2-拼手气红包
        reward_title: '谢谢参与', //	奖品标题 （实物）
        red_envelope_money: 0, //
        red_envelope_num: 1, //
        red_envelope_total: 0, //
        red_envelope_range: 0, // 单个金额右
        reward_image: '', //	奖品图片（实物）奖品图片url
        reward_stock: 0, //	奖品库存（实物）
        reward_desc: 0, //	奖品描述（描述）
        reward_probability: 100 //	奖品概率
      }
    ], //	奖品设置1
    invite_desc_switch: 1 // 分享描述是否展示 1-展示 2-隐藏
  })
watch(()=>props.rewardInfo, () => {
  let arr = []
  props.rewardInfo.forEach(item => {
    arr.push({
      reward_type: item.reward_type, //	奖品类型 1-实物 2-普通红包
      reward_image: item.reward_image, //	奖品图片（实物）奖品图片url
    })
  });
 formData.value.reward_attr = arr
},{immediate:true,deep:true})
watch(()=>props.inviteDescSwitch, () => {
 formData.value.invite_desc_switch = props.inviteDescSwitch
})
bus.on('stepOne', (data) => {
  console.log(data);
  
  formData.value.title = data
})
onUnmounted(() => {
  bus.off('stepOne')
})
</script>

<style lang="scss" scoped>
   .phone {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;

      .bg_phone {
        width: 330px;
        min-height: 495px;
        box-sizing: border-box;
        padding: 16px 11px 16px;
        border-radius: 30px;
        border: 1px solid #d2d8db;
        overflow: hidden;
        justify-content: center;

        background-color: #f1f7f9;

        // box-shadow: 0px 0.5px 10px rgb(0 0 0 / 20%);
        .common-layout {
          width: 100%;
          border-radius: 10%;
          background: url('@/assets/smartMarketing/themaskset.png') no-repeat;
          

          .el-container {
            width: 100%;
            height: 500px;
            font-size: 12px;
            color: #000;
            border-radius: 20px;
            background-color: #fe6622;

            .el-header {
              display: flex;
              width: 100%;

              height: 40px;
              padding: 10px 0 0 8px;
              text-align: center;

              // background-color: #fff;
              .icon {
              }

              .title {
                flex: 1;
                padding-right: 25px;
                text-align: center;
                color: #fffce3;
              }
            }

            .el-main {
              width: 100%;
              height: 100%;
              padding: 0;
              overflow: hidden;
              position: relative;
              .choujiangjihui_num{
                      position: absolute;
                      top: 68px;
                      left: 50%;
                      transform: translateX(-50%);
                      word-break: keep-all;
                      padding: 4px 15px;
                      color: #fff;
                      background: #FD8729;
                      border-radius: 15px 15px 15px 15px;
                      opacity: 1;
                      border: 1px solid #FFCA99;
              }
              .choujiangjihui_desc1{
                position: absolute;
                  top: 387px;
                  left: 50%;
                  word-break: keep-all;
                  transform: translateX(-50%);
                  color: #fff;

              }
              .choujiangjihui_desc2{
                width: 100%;
                text-align: center;
                position: absolute;
                  top: 410px;
                  // left: 50%;
                  word-break: keep-all;
                  // transform: translateX(-50%);
                  color: #fff;

              }

              .top {
                display: flex;
                justify-content: center;
                width: 100%;
                padding-top: 100px;
                margin-bottom: 15px;
                background: url('@/assets/smartMarketing/themaskset.png') no-repeat;
                background-size: 100% 100%;

                .prize_img_box {
                  padding: 24px;
                  background: url('@/assets/smartMarketing/outerring.png') no-repeat;
                  background-size: 100% 100%;
                  background-position: -7px 0px;

                  .one {
                    width: 20px;

                    img {
                      width: 40px;
                    }
                  }
                  .ones {
                    width: 40px;
                    height: 40px;
                    margin: 10px 0 10px 5px;
                  }
                  .rectangular2 {
                    background: url('@/assets/smartMarketing/rectangular2.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .rectangular3 {
                    background: url('@/assets/smartMarketing/rectangular3.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .rectangular4 {
                    background: url('@/assets/smartMarketing/rectangular4.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .rectangular5 {
                    background: url('@/assets/smartMarketing/rectangular5.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .rectangular6 {
                    background: url('@/assets/smartMarketing/rectangular6.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .rectangular7 {
                    background: url('@/assets/smartMarketing/rectangular7.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .rectangular8 {
                    background: url('@/assets/smartMarketing/rectangular8.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .prize {
                    display: flex;
                    justify-content: center;
                    font-size: 10px;
                    align-items: center;
                    position: relative;
                    top: -10px;
                    width: 220px;
                    height: 220px;
                    // background: url('@/assets/smartMarketing/rectangular4.png') no-repeat;
                    background-size: 100% 100%;
                    border-radius: 50%;

                    .begin {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 26%;
                      height: 32%;
                      border-radius: 50%;
                      color: #fff;
                      background: url('@/assets/smartMarketing/luckydraw.png') no-repeat;
                      background-size: cover;
                    }
                    .reward_attr{
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                      position: absolute;
                      font-size: 12px;
                      
                      .reward_attr_item2{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform:  translate(-28%, 160%) rotate(270deg);
                          div{
                            width: 200px;
                            height: 12px;
                          }
                        }
                        &:nth-child(2){
                          position: absolute;
                          transform:  translate(37%, 160%) rotate(90deg);
                          div{
                            width: 200px;
                            height: 12px;
                        
                          }
                        }
                      }
                      .reward_attr_item3{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform: translate(-38%, 98%) rotate(315deg);
                          div{
                            width: 400px;
                            height: 12px;
                          }
                        }
                        &:nth-child(2){
                          transform: translate(-6%, 98%) rotate(45deg);
                          div{
                            width: 400px;
                            height: 12px;
                          }
                        }
                        &:nth-child(3){
                          transform: translate(-22%, 290%) rotate(180deg);
                          div{
                            width: 400px;
                            height: 12px;
                          }
                        }
                      }
                      .reward_attr_item4{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform: translate(19%, 54%) rotate(315deg);
                          div{
                            width: 80px;
                            height: 12px;
                          }
                        }
                        &:nth-child(2){
                          transform: translate(155%, 54%) rotate(45deg);
                          div{
                            width: 80px;
                            height: 12px;
                          }
                        }
                        &:nth-child(3){
                          transform: translate(155%, 254%) rotate(135deg);
                          div{
                            width: 80px;
                            height: 12px;
                          }
                        }
                        &:nth-child(4){
                          transform: translate(19%, 254%) rotate(225deg);
                          div{
                            width: 80px;
                            height: 12px;
                          }
                        }
                       
                      }
                      .reward_attr_item5{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform: translate(71%, 43%) rotate(315deg);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(2){
                          transform: translate(271%, 43%) rotate(45deg);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(3){
                          transform: translate(312%, 210%) rotate(120deg);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(4){
                          transform: translate(170%, 290%) rotate(180deg);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(5){
                          transform: translate(23%, 211%) rotate(240deg);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                      
                       
                      }
                      .reward_attr_item6{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform:  translate(253%, 32%) rotate(45deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(2){
                          transform: translate(323%, 157%) rotate(90deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(3){
                          transform: translate(253%, 280%) rotate(140deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(4){
                          transform: translate(94%, 280%) rotate(213deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(5){
                          transform: translate(13%, 157%) rotate(270deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(6){
                          transform: translate(86%, 36%) rotate(316deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                      }
                      .reward_attr_item7{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform:   translate(245%, 26%) rotate(37deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(2){
                          transform: translate(318%, 118%) rotate(70deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(3){
                          transform: translate(296%, 250%) rotate(123deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(4){
                          transform: translate(169%, 301%) rotate(180deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(5){
                          transform: translate(47%, 251%) rotate(228deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(6){
                          transform: translate(18%, 118%) rotate(288deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(7){
                          transform: translate(105%, 20%) rotate(336deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                      }
                      .reward_attr_item8{
                        text-align: center;
                        position: absolute;
                        &:nth-child(1){
                          transform: translate(232%, 20%) rotate(25deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                       
                        &:nth-child(2){
                          transform: translate(319%, 101%) rotate(70deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                       
                       
                        &:nth-child(3){
                          transform: translate(321%, 214%) rotate(113deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        
                        &:nth-child(4){
                          transform: translate(235%, 296%) rotate(154deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(5){
                          transform: translate(106%, 298%) rotate(204deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(6){
                          transform: translate(17%, 216%) rotate(245deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(7){
                          transform: translate(17%, 100%) rotate(290deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                        &:nth-child(8){
                          transform: translate(105%, 20%) rotate(329deg) scale(0.8);
                          div{
                            width: 50px;
                            height: 12px;
                          }
                        }
                      }
                      .img20{
                        position: absolute;
                        top: 50%;
                        left: 25%;
                        transform: translate(-75%, -12%) rotate(0) scale(1);
                        object-fit: contain;
                      }
                      .img21{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translate(-75%, -12%) rotate(0) scale(1);
                        object-fit: contain;
                      }
                      .img30{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translate(-366%, -105%) rotate(290deg) scale(1);
                        object-fit: contain;
                      }
                      .img31{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translate(-93%, -105%) rotate(60deg) scale(1);
                        object-fit: contain;
                      }
                      .img32{
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translate(-219%, 141%) rotate(180deg) scale(1);
                        object-fit: contain;
                      }
                      .img40{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-344%, 129%) rotate(315deg) scale(1);
                        object-fit: contain;
                      }
                      .img41{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-107%, 129%) rotate(45deg) scale(1);
                        object-fit: contain;
                      }
                      .img42{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-107%, 374%) rotate(137deg) scale(1);
                        object-fit: contain;
                      }
                      .img43{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-349%, 374%) rotate(225deg) scale(1);
                        object-fit: contain;
                      }
                      .img50{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-335%, 109%) rotate(307deg) scale(1);
                        object-fit: contain;
                      }
                      .img51{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-116%, 109%) rotate(41deg) scale(1);
                        object-fit: contain;
                      }
                      .img52{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-77%, 298%) rotate(115deg) scale(1);
                        object-fit: contain;
                      }
                      .img53{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-225%, 403%) rotate(180deg) scale(1);
                        object-fit: contain;
                      }
                      .img54{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-375%, 298%) rotate(244deg) scale(1);
                        object-fit: contain;
                      }
                      .img60{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-142%, 98%) rotate(34deg) scale(1);
                        object-fit: contain;
                      }
                      .img61{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-54%, 244%) rotate(84deg) scale(1);
                        object-fit: contain;
                      }
                      .img62{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-140%, 400%) rotate(143deg) scale(1);
                        object-fit: contain;
                      }
                      .img63{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-314%, 400%) rotate(214deg) scale(1);
                        object-fit: contain;
                      }
                      .img64{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-410%, 241%) rotate(268deg) scale(1);
                        object-fit: contain;
                      }
                      .img65{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-318%, 91%) rotate(322deg) scale(1);
                        object-fit: contain;
                      }
                      .img70{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-143%, 74%) rotate(29deg) scale(1);
                        object-fit: contain;
                      }
                      .img71{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-49%, 204%) rotate(80deg) scale(1);
                        object-fit: contain;
                      }
                      .img72{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-81%, 364%) rotate(127deg) scale(1);
                        object-fit: contain;
                      }
                      .img73{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-223%, 429%) rotate(180deg) scale(1);
                        object-fit: contain;
                      }
                      .img74{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-369%, 361%) rotate(226deg) scale(1);
                        object-fit: contain;
                      }
                      .img75{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-410%, 198%) rotate(287deg) scale(1);
                        object-fit: contain;
                      }
                      .img76{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-305%, 78%) rotate(332deg) scale(1);
                        object-fit: contain;
                      }
                      .img80{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-151%, 65%) rotate(26deg) scale(1);
                        object-fit: contain;
                      }
                      .img81{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-45%, 174%) rotate(68deg) scale(1);
                        object-fit: contain;
                      }
                      .img82{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-39%, 322%) rotate(113deg) scale(1);
                        object-fit: contain;
                      }
                      .img83{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-147%, 430%) rotate(154deg) scale(1);
                        object-fit: contain;
                      }
                      .img84{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-304%, 434%) rotate(207deg) scale(1);
                        object-fit: contain;
                      }
                      .img85{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-411%, 320%) rotate(246deg) scale(1);
                        object-fit: contain;
                      }
                      .img86{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-411%, 165%) rotate(296deg) scale(1);
                        object-fit: contain;
                      }
                      .img87{
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-305%, 68%) rotate(331deg) scale(1);
                        object-fit: contain;
                      }

                      
                    }
                  }
                }
              }

              .content {
                display: flex;
                flex-direction: column;
                align-items: center;

                .text {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 95%;
                  height: 40px;
                  border-radius: 2%;
                  margin-bottom: 10px;
                  background-color: #ffea58;
                }

                .text_p {
                  flex-direction: column;

                  p {
                    margin-bottom: 5px;
                  }
                }

                .prize_box {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  width: 95%;
                  min-height: 100px;
                  border-radius: 2%;
                  margin-bottom: 10px;
                  background-color: #fff;

                  .prize_box_title {
                    width: 100%;
                    height: 25px;
                    padding-top: 20px;
                    margin-bottom: 12px;
                    text-align: center;
                    background-color: #fffce3;
                  }

                  .prize_list {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    margin-bottom: 10px;

                    .left {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding: 5px;

                      img {
                        width: 20px;
                        height: 20px;
                        background-color: #cccccc;
                      }

                      span {
                        padding-left: 5px;
                      }
                    }

                    .right {
                      padding: 5px;
                    }

                    .prize_list_bottom {
                      p {
                        padding: 0 5px;
                        line-height: 20px;
                        color: #767a79;
                      }
                    }
                  }

                  .footer_box {
                    width: 100%;
                    height: 40px;
                    margin-bottom: 10px;
                    background-color: #fff;
                    text-align: center;
                    line-height: 40px;
                    font-size: 12px;
                    color: #000;
                  }
                }
              }
            }

            .el-footer {
              height: 40px;
              padding: 0 8px;
              border-radius: 2%;
            }
          }
        }

        .friend_con {
          margin: 8px auto;
          width: 225px;
          height: 469px;
          overflow: hidden;
          border-radius: 30px;

          .bg_top {
            width: 100%;
            height: 183px;
            background: url('/static/app/tm.png');
            background-size: cover;
            position: relative;

            .autor {
              position: absolute;
              right: 6px;
              bottom: -10px;

              .avator {
                width: 37px;
                margin-left: 2px;
              }

              .avar_name {
                margin-top: 8px;
                float: left;
                font-size: 12px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #ffffff;
              }
            }
          }

          .other_con {
            margin: 10px;

            .firend_status {
              display: flex;
              margin-bottom: 10px;

              .avator_img {
                width: 27px;
                height: 27px;
                margin-right: 4px;
              }

              .firend_r_con {
                .friend_name {
                  font-size: 12px;
                  font-family: STHeitiSC-Medium, STHeitiSC;
                  font-weight: 500;
                  color: #586b95;
                  transform: scale(0.83);
                  transform-origin: left top;
                  // zoom: 0.83;
                }

                .friend_title {
                  margin-top: 4px;
                  font-size: 12px;
                  font-family: STHeitiSC-Medium, STHeitiSC;
                  font-weight: 500;
                  color: #33302d;
                  // zoom: 0.83;
                  transform: scale(0.83);
                  transform-origin: left top;
                }

                .friend_main_con {
                  margin-top: 6px;
                  padding: 4px;
                  background: #f9f9f9;
                  width: 170px;

                  .friend_icon {
                    float: left;
                    width: 22px;
                    height: 22px;
                    margin-right: 4px;
                  }

                  .friend_main_r {
                    overflow: hidden;

                    .friend_title {
                      margin-top: 0;
                      font-size: 12px;
                      font-family: STHeitiSC-Medium, STHeitiSC;
                      color: #666;
                      font-weight: 500;
                      margin-bottom: 2px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      word-break: break-all;
                    }

                    .friend_desc {
                      font-size: 12px;
                      font-family: STHeitiSC-Medium, STHeitiSC;
                      font-weight: 500;
                      color: #33302d;
                      line-height: 12px;
                      transform: scale(0.83);
                      transform-origin: left top;
                      text-overflow: -o-ellipsis-lastline;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-line-clamp: 3;
                      line-clamp: 3;
                      -webkit-box-orient: vertical;
                    }
                  }

                  &:hover {
                    background: #fff5f2;
                  }
                }

                .friend_pic_video {
                  position: relative;
                  width: 140px;
                  height: 90px;

                  .big_image_video {
                    width: 140px;
                    height: 90px;
                  }

                  .cover {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    top: 0;
                    left: 0;
                    background: rgba(0, 0, 0, 0.4);

                    img {
                      width: 30px;
                      height: 30px;
                      cursor: pointer;
                    }
                  }
                }

                .big_image {
                  max-width: 120px;
                  max-height: 90px;
                }

                .small_image {
                  width: 46px;
                  height: 46px;
                  margin-right: 2px;
                  margin-bottom: 1px;
                }
              }
            }
          }
        }
      }

      .poster {
        position: relative;
        // position: fixed;
        // width: 375px;
        // height: 700px;
        width: 360px;
        height: 640px;
        border: #eaeaea solid 1px;
        background-size: cover;

        .head_portrait {
          position: absolute;
          top: 565px;
          left: 15px;
          z-index: 3;
          cursor: move;

          .user_img_left {
            // position: fixed;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            // background-color: blue;
          }

          .radius {
            position: absolute;
            z-index: 3;
            cursor: move;
            left: 15px;
            top: 565px;
            width: 50px;
            height: 50px;
            background-color: blue;
          }
        }

        .nickname_box {
          position: absolute;
          z-index: 3;
          cursor: move;
          left: 75px;
          top: 565px;
        }

        .desc_box {
          position: absolute;
          // width: 210px;
          z-index: 3;
          cursor: move;
          left: 75px;
          top: 593px;
        }

        .qrcode_box {
          position: absolute;
          z-index: 3;
          cursor: move;
          right: 50px;
          bottom: 50px;
          width: 90px;
          height: 90px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
</style>
